Skip to content

Implement chart authoring feedback from issue #9 - #15

Merged
tannerlinsley merged 23 commits into
mainfrom
taren/issue-9-chart-authoring
Jul 31, 2026
Merged

Implement chart authoring feedback from issue #9#15
tannerlinsley merged 23 commits into
mainfrom
taren/issue-9-chart-authoring

Conversation

@tannerlinsley

@tannerlinsley tannerlinsley commented Jul 31, 2026

Copy link
Copy Markdown
Member

Summary

  • model focus effects as ordinary whenFocused marks, with shared primary/group/source/pinned state across SVG, Canvas, custom surfaces, tooltips, and export
  • add typed inline mark states with single object-bag callbacks, ordered style overrides, and SVG/Canvas transitions for changing existing geometry
  • replace flat axis presentation fields with nested axis configuration, independent grids, length-aware tick candidates, rotation, collision thinning, and hard-kept labels
  • add independent tooltip x/y anchors and callback access to focus, pointer, plot, surface, and resolved scales in the opt-in tooltip extension
  • make repeated bar positions stack implicitly, infer categorical series from color, support explicit stack({ order, offset }), and make layout: group() the side-by-side opt-in
  • add eager, standalone transforms for grouping, numeric/2D/calendar bins, windows, cumulative values, ranks, normalization, selection, row stacks, and reusable reducers
  • keep transforms hoistable and memoizable: accessors/reducers use object bags, results preserve source lineage, and ordinary functions remain the custom-composition escape hatch
  • migrate eight catalog consumers and update examples, adapters, package exports, generated docs, authoring guidance, design decisions, and API-friction records

Breaking changes

Axis presentation now lives under x.axis and y.axis. Existing guide, ticks, format, label, tickRotate, and labelOffset fields migrate to the nested axis model. grid remains at the scale layer and is independent from axis visibility.

Repeated bars now stack by default. Use layout: group() for side-by-side bars and layout: stack(...) only when overriding stack order or offset. A categorical color channel supplies series identity when z is absent; continuous color requires explicit z.

General transforms are pure eager functions, not a mark-options protocol or reactive graph. There is no transformData API; custom and composed transforms are ordinary functions that can live outside chart code.

Bundle audit

  • common transform suite: 16.59 kB minified / 6.16 kB gzip
  • granular families: 0.42 kB gzip for advanced reducers through 2.89 kB for numeric bins
  • TanStack histogram: 18.37 kB gzip; equivalent direct-D3 preparation: 17.09 kB
  • compact-scale line scene: 7.92 kB gzip; React compact-scale line: 16.59 kB
  • opt-in tooltip increment: 3.52 kB gzip; portal transport increment: 0.79 kB
  • 12-consumer TanStack comparison range: 26.62–32.17 KiB gzip
  • every transform family has an isolated ceiling and retained-module boundary; ordinary line, compact-scale, and tooltip kernels reject transform leakage
  • numeric/2D bins may retain d3-array, row stacks may retain d3-shape, and other granular families reject both plus unrelated transforms

Validation

  • pnpm test: 120 files / 629 tests
  • pnpm typecheck
  • pnpm docs:check: 82 pages, 84 catalog embeds, 17 executable examples
  • pnpm package:check: packed exports/runtime plus seven framework adapters
  • pnpm bundle:check: all exact baselines, feature ceilings, and module boundaries pass
  • pnpm benchmark:check: all 60 comparison bundles pass against committed-source provenance
  • pnpm format:check
  • scoped Chromium conformance for eight migrated transform cases: 8/8 visual passes, 97.7% mean diagnostic geometry similarity, zero strict-source diagnostics

Closes #9

@coderabbitai

coderabbitai Bot commented Jul 31, 2026

Copy link
Copy Markdown

Important

Review skipped

Too many files!

This PR contains 259 files, which is 159 over the limit of 100.

To get a review, narrow the scope:
• coderabbit review --committed # exclude uncommitted changes
• coderabbit review --dir # limit to a subdirectory
• coderabbit review --base # compare against a closer base

Upgrade to a paid plan to raise the limit.

This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: acb9cb1d-0b09-45da-9aea-fef0261c4d6e

📥 Commits

Reviewing files that changed from the base of the PR and between d2fd700 and 9afcffe.

📒 Files selected for processing (259)
  • .changeset/issue-9-chart-authoring.md
  • API-FRICTION.md
  • ISSUE-9-DESIGN-NOTES.md
  • README.md
  • benchmarks/bundle-size/README.md
  • benchmarks/bundle-size/universal-baseline.json
  • benchmarks/comparison/bundle-baseline.json
  • benchmarks/comparison/libraries/tanstack/area.ts
  • benchmarks/comparison/libraries/tanstack/bar.ts
  • benchmarks/comparison/libraries/tanstack/base.ts
  • benchmarks/comparison/libraries/tanstack/line.ts
  • benchmarks/comparison/libraries/tanstack/scatter.ts
  • benchmarks/conformance/README.md
  • benchmarks/conformance/cases/01-line-gaps/tanstack.ts
  • benchmarks/conformance/cases/02-multi-line-end-labels/tanstack.ts
  • benchmarks/conformance/cases/03-temperature-range-band/tanstack.ts
  • benchmarks/conformance/cases/04-stacked-time-area/case.json
  • benchmarks/conformance/cases/04-stacked-time-area/tanstack.ts
  • benchmarks/conformance/cases/13-interval-timeline/tanstack.ts
  • benchmarks/conformance/cases/14-error-bars/tanstack.ts
  • benchmarks/conformance/cases/15-boxplot/tanstack.ts
  • benchmarks/conformance/cases/16-lollipop/tanstack.ts
  • benchmarks/conformance/cases/17-dumbbell/tanstack.ts
  • benchmarks/conformance/cases/18-cumulative-histogram/tanstack.ts
  • benchmarks/conformance/cases/19-moving-average-line/case.json
  • benchmarks/conformance/cases/19-moving-average-line/tanstack.ts
  • benchmarks/conformance/cases/20-normalized-stacked-area/case.json
  • benchmarks/conformance/cases/20-normalized-stacked-area/tanstack.ts
  • benchmarks/conformance/cases/21-streamgraph/tanstack.ts
  • benchmarks/conformance/cases/22-bollinger-band/tanstack.ts
  • benchmarks/conformance/cases/24-quantitative-binned-heatmap/tanstack.ts
  • benchmarks/conformance/cases/25-calendar-heatmap/tanstack.ts
  • benchmarks/conformance/cases/26-diverging-likert/tanstack.ts
  • benchmarks/conformance/cases/27-parallel-coordinates/tanstack.ts
  • benchmarks/conformance/cases/28-candlestick/tanstack.ts
  • benchmarks/conformance/cases/29-waterfall/tanstack.ts
  • benchmarks/conformance/cases/30-slopegraph/tanstack.ts
  • benchmarks/conformance/cases/31-linear-regression/tanstack.ts
  • benchmarks/conformance/cases/32-change-arrows/tanstack.ts
  • benchmarks/conformance/cases/33-difference-chart/tanstack.ts
  • benchmarks/conformance/cases/34-pointer-tooltip/case.json
  • benchmarks/conformance/cases/34-pointer-tooltip/tanstack.ts
  • benchmarks/conformance/cases/35-grouped-tooltip/case.json
  • benchmarks/conformance/cases/35-grouped-tooltip/tanstack.ts
  • benchmarks/conformance/cases/37-delaunay-network/tanstack.ts
  • benchmarks/conformance/cases/42-vector-field/tanstack.ts
  • benchmarks/conformance/cases/43-hexbin-density/tanstack.ts
  • benchmarks/conformance/cases/50-empirical-cdf/tanstack.ts
  • benchmarks/conformance/cases/51-faceted-distributions/tanstack.ts
  • benchmarks/conformance/cases/53-log-scale-scatter/tanstack.ts
  • benchmarks/conformance/cases/54-bump-ranking/tanstack.ts
  • benchmarks/conformance/cases/55-indexed-multi-line/tanstack.ts
  • benchmarks/conformance/cases/56-connected-scatter/tanstack.ts
  • benchmarks/conformance/cases/57-scatter-marginal-histograms/tanstack.ts
  • benchmarks/conformance/cases/58-select-extrema/case.json
  • benchmarks/conformance/cases/58-select-extrema/tanstack.ts
  • benchmarks/conformance/cases/59-grouped-reducer-bars/case.json
  • benchmarks/conformance/cases/59-grouped-reducer-bars/tanstack.ts
  • benchmarks/conformance/cases/60-lag-autocorrelation/tanstack.ts
  • benchmarks/conformance/cases/61-quantile-ribbon/tanstack.ts
  • benchmarks/conformance/cases/62-ridgeline-density/tanstack.ts
  • benchmarks/conformance/cases/63-violin-distributions/tanstack.ts
  • benchmarks/conformance/cases/64-marimekko-mosaic/tanstack.ts
  • benchmarks/conformance/cases/65-voronoi-nearest-tooltip/tanstack.ts
  • benchmarks/conformance/cases/70-composed-chart/tanstack.ts
  • benchmarks/conformance/cases/71-recharts-population-pyramid/tanstack.ts
  • benchmarks/conformance/cases/72-recharts-mixed-bars/tanstack.ts
  • benchmarks/conformance/cases/73-many-point-scatter/tanstack.ts
  • benchmarks/conformance/cases/80-echarts-axis-pointer/tanstack.ts
  • benchmarks/conformance/cases/81-recharts-interactive-legend/tanstack.ts
  • benchmarks/conformance/cases/82-chart-table-selection/tanstack.ts
  • benchmarks/conformance/cases/83-focus-context-window/tanstack.ts
  • benchmarks/conformance/cases/84-pinned-nested-chart-tooltip/tanstack.ts
  • benchmarks/conformance/cases/85-scrollable-resource-lanes/tanstack.ts
  • benchmarks/conformance/cases/86-streaming-window-preservation/tanstack.ts
  • benchmarks/conformance/cases/87-echarts-synchronized-cursors/tanstack.ts
  • benchmarks/conformance/cases/88-echarts-free-cursor/tanstack.ts
  • benchmarks/conformance/cases/89-brush-range-selection/tanstack.ts
  • benchmarks/conformance/cases/90-zoomable-time-window/tanstack.ts
  • benchmarks/conformance/cases/91-timeline-playback-scrubber/tanstack.ts
  • benchmarks/conformance/cases/92-editable-event-range/tanstack.ts
  • benchmarks/conformance/cases/bar-grouped/tanstack.ts
  • benchmarks/conformance/cases/bar-horizontal-ranking/tanstack.ts
  • benchmarks/conformance/cases/bar-stacked/case.json
  • benchmarks/conformance/cases/bar-stacked/tanstack.ts
  • benchmarks/conformance/cases/bar-vertical-sorted/tanstack.ts
  • benchmarks/conformance/cases/facets-anscombe/tanstack.ts
  • benchmarks/conformance/cases/heatmap-labeled/tanstack.ts
  • benchmarks/conformance/cases/histogram/case.json
  • benchmarks/conformance/cases/histogram/tanstack.ts
  • benchmarks/conformance/cases/scatter-bubble/tanstack.ts
  • benchmarks/entries/charts-histogram-svg.ts
  • benchmarks/entries/charts-transform-bin-time.ts
  • benchmarks/entries/charts-transform-bin-xy.ts
  • benchmarks/entries/charts-transform-bin.ts
  • benchmarks/entries/charts-transform-cumulative.ts
  • benchmarks/entries/charts-transform-group.ts
  • benchmarks/entries/charts-transform-normalize.ts
  • benchmarks/entries/charts-transform-rank.ts
  • benchmarks/entries/charts-transform-reduce.ts
  • benchmarks/entries/charts-transform-select.ts
  • benchmarks/entries/charts-transform-stack.ts
  • benchmarks/entries/charts-transform-suite.ts
  • benchmarks/entries/charts-transform-window.ts
  • benchmarks/rendering.ts
  • docs/comparison.md
  • docs/concepts/chart-definitions.md
  • docs/concepts/data-and-channels.md
  • docs/concepts/grammar-of-graphics.md
  • docs/concepts/layout-axes-and-coordinates.md
  • docs/concepts/marks-and-layering.md
  • docs/concepts/scales-and-d3.md
  • docs/config.json
  • docs/examples/interactive-charts.md
  • docs/examples/stacked-and-composition.md
  • docs/framework/octane/adapter.md
  • docs/framework/octane/quick-start.md
  • docs/framework/react/adapter.md
  • docs/framework/react/quick-start.md
  • docs/guides/accessibility.md
  • docs/guides/bundle-size-and-performance.md
  • docs/guides/dynamic-data-and-animation.md
  • docs/guides/exporting.md
  • docs/guides/migrating.md
  • docs/guides/responsive-charts.md
  • docs/guides/tooltips-and-focus.md
  • docs/guides/transforms-and-reactivity.md
  • docs/overview.md
  • docs/quick-start.md
  • docs/reference/chart-definitions.md
  • docs/reference/chart-spec.md
  • docs/reference/focus-and-interaction.md
  • docs/reference/index.md
  • docs/reference/marks/bar-and-rect.md
  • docs/reference/marks/dot-and-hexagon.md
  • docs/reference/marks/line-and-area.md
  • docs/reference/marks/text-frame-and-facet.md
  • docs/reference/rendering-and-export.md
  • docs/reference/scales-guides-and-color.md
  • docs/reference/transforms.md
  • docs/reference/types.md
  • examples/charts-octane/src/charts.ts
  • examples/charts-react/src/charts.ts
  • examples/sandbox/src/plots.ts
  • llms.txt
  • packages/charts-core-d3/docs/AI-GUIDE.md
  • packages/charts-core-d3/docs/observable-plot-migration.md
  • packages/charts-core-d3/docs/recipes.md
  • packages/charts-core-d3/package.json
  • packages/charts-core-d3/src/index.ts
  • packages/charts-core-d3/src/transforms.test.ts
  • packages/charts-core-d3/src/transforms.ts
  • packages/charts-core/README.md
  • packages/charts-core/docs/comparison.md
  • packages/charts-core/docs/concepts/chart-definitions.md
  • packages/charts-core/docs/concepts/data-and-channels.md
  • packages/charts-core/docs/concepts/grammar-of-graphics.md
  • packages/charts-core/docs/concepts/layout-axes-and-coordinates.md
  • packages/charts-core/docs/concepts/marks-and-layering.md
  • packages/charts-core/docs/concepts/scales-and-d3.md
  • packages/charts-core/docs/config.json
  • packages/charts-core/docs/examples/interactive-charts.md
  • packages/charts-core/docs/examples/stacked-and-composition.md
  • packages/charts-core/docs/framework/octane/adapter.md
  • packages/charts-core/docs/framework/octane/quick-start.md
  • packages/charts-core/docs/framework/react/adapter.md
  • packages/charts-core/docs/framework/react/quick-start.md
  • packages/charts-core/docs/guides/accessibility.md
  • packages/charts-core/docs/guides/bundle-size-and-performance.md
  • packages/charts-core/docs/guides/dynamic-data-and-animation.md
  • packages/charts-core/docs/guides/exporting.md
  • packages/charts-core/docs/guides/migrating.md
  • packages/charts-core/docs/guides/responsive-charts.md
  • packages/charts-core/docs/guides/tooltips-and-focus.md
  • packages/charts-core/docs/guides/transforms-and-reactivity.md
  • packages/charts-core/docs/overview.md
  • packages/charts-core/docs/quick-start.md
  • packages/charts-core/docs/reference/chart-definitions.md
  • packages/charts-core/docs/reference/chart-spec.md
  • packages/charts-core/docs/reference/focus-and-interaction.md
  • packages/charts-core/docs/reference/index.md
  • packages/charts-core/docs/reference/marks/bar-and-rect.md
  • packages/charts-core/docs/reference/marks/dot-and-hexagon.md
  • packages/charts-core/docs/reference/marks/line-and-area.md
  • packages/charts-core/docs/reference/marks/text-frame-and-facet.md
  • packages/charts-core/docs/reference/rendering-and-export.md
  • packages/charts-core/docs/reference/scales-guides-and-color.md
  • packages/charts-core/docs/reference/transforms.md
  • packages/charts-core/docs/reference/types.md
  • packages/charts-core/llms.txt
  • packages/charts-core/package.json
  • packages/charts-core/src/area-x.ts
  • packages/charts-core/src/area.ts
  • packages/charts-core/src/band.ts
  • packages/charts-core/src/bar.ts
  • packages/charts-core/src/canvas.test.ts
  • packages/charts-core/src/canvas.ts
  • packages/charts-core/src/configured-scale.ts
  • packages/charts-core/src/dom-types.ts
  • packages/charts-core/src/dot.ts
  • packages/charts-core/src/export.test.ts
  • packages/charts-core/src/export.ts
  • packages/charts-core/src/facet.test.ts
  • packages/charts-core/src/facet.ts
  • packages/charts-core/src/focus-layer.ts
  • packages/charts-core/src/focus-mark.test.ts
  • packages/charts-core/src/focus-mark.ts
  • packages/charts-core/src/group.ts
  • packages/charts-core/src/index.ts
  • packages/charts-core/src/line.ts
  • packages/charts-core/src/mark-state.ts
  • packages/charts-core/src/mark.ts
  • packages/charts-core/src/marks.test.ts
  • packages/charts-core/src/point-color.test.ts
  • packages/charts-core/src/polar.test.ts
  • packages/charts-core/src/reconcile.ts
  • packages/charts-core/src/rect.ts
  • packages/charts-core/src/renderer.test.ts
  • packages/charts-core/src/renderer.ts
  • packages/charts-core/src/runtime.test.ts
  • packages/charts-core/src/scene-layout.test.ts
  • packages/charts-core/src/scene.test.ts
  • packages/charts-core/src/scene.ts
  • packages/charts-core/src/stack-internal.ts
  • packages/charts-core/src/stack.ts
  • packages/charts-core/src/svg-renderer.ts
  • packages/charts-core/src/svg-surface.ts
  • packages/charts-core/src/text.ts
  • packages/charts-core/src/tooltip.ts
  • packages/charts-core/src/transform-bin-time.ts
  • packages/charts-core/src/transform-bin-xy.ts
  • packages/charts-core/src/transform-bin.ts
  • packages/charts-core/src/transform-cumulative.ts
  • packages/charts-core/src/transform-group.ts
  • packages/charts-core/src/transform-internal.ts
  • packages/charts-core/src/transform-normalize.ts
  • packages/charts-core/src/transform-rank.ts
  • packages/charts-core/src/transform-reduce-internal.ts
  • packages/charts-core/src/transform-reduce.ts
  • packages/charts-core/src/transform-select.ts
  • packages/charts-core/src/transform-stack.ts
  • packages/charts-core/src/transform-window.ts
  • packages/charts-core/src/transform.test.ts
  • packages/charts-core/src/transform.ts
  • packages/charts-core/src/type-contract.test.ts
  • packages/charts-core/src/types.ts
  • packages/charts-core/src/universal-types.ts
  • packages/charts-core/src/universal.ts
  • packages/charts-fixtures/src/index.ts
  • packages/charts-fixtures/src/stats-parity.ts
  • packages/octane-charts/src/CanvasChart.client.test.tsrx
  • packages/octane-charts/src/Chart.client.test.tsrx
  • packages/react-charts/src/CanvasChart.test.tsx
  • packages/react-charts/src/Chart.test.tsx
  • scripts/check-packed-consumers.mjs
  • scripts/compare-plot-catalog.mjs
  • scripts/evaluate-chart-authoring.mjs
  • scripts/measure-bundles.mjs
  • scripts/sync-package-docs.mjs

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@tannerlinsley
tannerlinsley merged commit 907d9ee into main Jul 31, 2026
17 checks passed
@github-actions github-actions Bot mentioned this pull request Jul 31, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feedback on tooltip API design

1 participant